<template>
    <div class="site-footer">
        <div class="cont">
            <div class="footer-service">
                <ul class="list-service">
                    <li>
                        <a href="" target="">
                            <a-icon type="tool" />
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="" target="">
                            <a-icon type="clock-circle" />
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="" target="">
                            <a-icon type="dashboard" />
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="" target="">
                            <a-icon type="gift" />
                            满69包邮
                        </a>
                    </li>
                    <li>
                        <a href="" target="">
                            <a-icon type="environment" />
                            520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-links clearfix">
                <dl class="col-links col-links-first">
                    <dt>帮助中心</dt>
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/service/account/Account%20registration/" target="_blank">账户管理</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/service/buy/SalesTime/" target="_blank">购物指南</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/service/order/sendprogress/" target="_blank">订单操作</a>
                    </dd>
                </dl> 
                <dl class="col-links ">
                    <dt>服务支持</dt> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/service/exchange" target="_blank">售后政策</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/service/" target="_blank">自助服务</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/service/download/" target="_blank">相关下载</a>
                    </dd>
                </dl> 
                <dl class="col-links ">
                    <dt>线下门店</dt> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/service/mihome/list" target="_blank">小米之家</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/service/sitelist" target="_blank">服务网点</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/service/family-location" target="_blank">授权体验店/专区</a>
                    </dd>
                </dl> 
                <dl class="col-links ">
                    <dt>关于小米</dt> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/about/" target="_blank">了解小米</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//hr.xiaomi.com/" target="_blank">加入小米</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//company.mi.com/zh-cn/ir/indexContent/index.html" target="_blank">投资者关系</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/csr/" target="_blank">企业社会责任</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/integrity" target="_blank">廉洁举报</a>
                    </dd>
                </dl> 
                <dl class="col-links ">
                    <dt>关注我们</dt> 
                    <dd>
                        <a rel="nofollow" href="//weibo.com/xiaomishangcheng" target="_blank">新浪微博</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="javascript:void(0);" id="J_siteWeixinCode">官方微信</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/about/contact/" target="_blank">联系我们</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/foundation/index" target="_blank">公益基金会</a>
                    </dd>
                </dl> 
                <dl class="col-links ">
                    <dt>特色服务</dt> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/order/fcode" target="_blank">F 码通道</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/order/giftcode" target="_blank">礼物码</a>
                    </dd> 
                    <dd>
                        <a rel="nofollow" href="//www.mi.com/service/imei" target="_blank">防伪查询</a>
                    </dd>
                </dl> 
                <div class="col-contact">
                    <p class="phone">400-100-5678</p> 
                    <p>8:00-18:00（仅收市话费）</p> 
                    <a rel="nofollow" class="btn btn-line-primary btn-small J_contactBtn">
                        <a-icon type="message" class="iconfont-message2" /> 人工客服 
                    </a> 
                    <div class="follow">关注小米：
                        <a href="https://weibo.com/xiaomishangcheng" target="_blank" class="wb">
                        </a>
                        <a href="javascript:void(0);" id="J_followWx" class="wx">
                        </a> 
                        <img src="//cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wx-img.png" id="J_followWxImg">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SiteFooter',
}
</script>

<style lang="less" scoped>
.site-footer {
    color: #333;

    .cont {
        width: 1226px;
        margin: auto;

        .footer-service {
            padding: 27px 0;
            box-sizing: border-box;
            border-bottom: 1px solid #e0e0e0;

            .list-service {
                width: 100%;

                li {
                    float: left;
                    width: 19.8%;
                    height: 25px;
                    border-left: 1px solid #e0e0e0;
                    font-size: 16px;
                    line-height: 25px;
                    text-align: center;

                    &:first-child {
                        border-left: 0;
                    }

                    a {
                        color: #616161;
                        transition: color .2s;
                    }
                }
            }
        }

        .footer-links {
            padding: 40px 0;
            box-sizing: border-box;

            .col-links {
                float: left;
                width: 160px;
                margin: 0;

                dt {
                    margin: -1px 0 26px;
                    font-size: 14px;
                    line-height: 1.25;
                    color: #424242;
                }

                dd {
                    margin: 10px 0 0;
                    font-size: 12px;

                    a {
                        color: #757575;
                        font-size: 12px;

                        &:hover {
                            color: #ff6700;
                        }
                    }
                }
            }

            .col-contact {
                float: right;
                width: 251px;
                border-left: 1px solid #e0e0e0;
                text-align: center;
                color: #616161;

                .phone {
                    font-size: 22px;
                    line-height: 1;
                    color: #ff6700;
                }

                p {
                    margin: 0 0 5px 0;
                    font-size: 12px;
                }

                .btn {
                    display: inline-block;
                    width: 158px;
                    height: 38px;
                    padding: 0;
                    margin: 0;
                    border: 1px solid #b0b0b0;
                    font-size: 14px;
                    line-height: 38px;
                    text-align: center;
                    color: #b0b0b0;
                    cursor: pointer;
                    -webkit-transition: all .4s;
                    transition: all .4s;
                }

                .btn-small {
                    width: 118px;
                    height: 28px;
                    font-size: 12px;
                    line-height: 28px;
                }

                .btn-line-primary {
                    border-color: #ff6700;
                    background: #fff;
                    color: #ff6700;

                    &:hover {
                        color: #fff;
                        background: #ff6700;
                    }
                }

                .follow {
                    font-size: 12px;
                    margin-top: 10px;
                    position: relative;

                    a {
                        width: 24px;
                        height: 24px;
                        display: inline-block;
                        vertical-align: middle;
                        margin-left: 6px;
                        margin-top: -3px;

                        &.wb {
                            background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wb.png) 50% 0 no-repeat;
                            background-size: cover;

                            &:hover {
                                background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wb@2x.png);
                            }
                        }

                        &.wx {
                            background: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wx.png) 50% 0 no-repeat;
                            background-size: cover;

                            &:hover {
                                background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/global/wx@2x.png);

                                & + img {
                                    display: block;
                                }
                            }
                        }
                    }

                    img {
                        width: 126px;
                        height: 126px;
                        z-index: 2;
                        position: absolute;
                        top: 20px;
                        left: 100px;
                        border: 0;
                        display: none;
                    }
                }
            }
        }
    }
}
</style>